<template>
  <div class="titleborder" :style="borderstyle">
    <div class="titlespan" :style="titleStyle">
      <span :style="mainTitleStyle">&nbsp;&nbsp;{{ bordertitlearr[0] }} </span>
      <span :style="unitStyle">{{ bordertitlearr[1] }}&nbsp;&nbsp;</span>
    </div>
    <div class="titlecontent" :style="titleContentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
// import defaultmixins from "@/mixins/bigScreen/defaultmixins";

import commonmixins from "@/mixins/bigScreen/commonmixins";

//纯色title

export default {
  name: "commontitleborder",
  mixins: [commonmixins],
  props: {
    borderOptions: {
      default: function () {
        return {
          titleimgurl: "title4jiao",
          bakimgurl: "",
        };
      },
    },
  },
  data() {
    return {
      backUrl: "/configuration/2d/titlezzn.png",
    };
  },
  computed: {
    bordertitlearr() {
      let tarr = this.borderOptions.bordertitle.split("/");
      if (tarr.length == 1) {
        tarr.push("")
      }

      if (tarr[0] == '补水量') {
        tarr = ['补水量','(t/h)']
      }

      return tarr 
    },
    borderstyle() {
      return {
        backgroundColor: this.$root.setting.data.bakcolor ? this.$root.setting.data.bakcolor : '#042037dd'
      };
    },
    titleStyle() {
      return {
        // ...this.borderOptions.titleSpan,
        backgroundImage: `url(/configuration/2d/${this.borderOptions.titleimgurl ? this.borderOptions.titleimgurl : 'title4jiao'}.png)`,
        height: this.getscalepxc(18),
        lineHeight: this.getscalepxc(18),
        marginLeft: this.getscalepxc(5),
        // padding: this.getscalepxc(5)
      };
    },
    titleContentStyle() {
      return {
        ...this.borderOptions.titleContent,
        height: `calc(100% - ${this.getscalepxcnum(18)}px)`,
      };
    },
    unitStyle() {
      return {
        color: "#4FC7FF",
        fontSize: this.getscalepxc(8),
      };
    },
    mainTitleStyle() {
      return {
        color: "white",
        fontSize: this.getscalepxc(10),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.titleborder {
  height: 100%;
  width: 100%;
  // background-color: #042037dd;
}

.titlespan {
  // border: 1px dashed #fffdef;
  width: fit-content;
  background-size: 100% 100%;
  text-align: center;
}
.titlecontent {
}
.lbdiv {
}
</style>
